<template>
  <div class="contains">
    <a-breadcrumb
      style="font-size: 18px; font-weight: bold; margin-bottom: 20px"
    >
      <a-breadcrumb-item>发布交易</a-breadcrumb-item>
    </a-breadcrumb>
    <div style="padding: 10px 70px">
      <a-typography-paragraph
        >您可以在输入了<a-typography-text strong>交易时间段</a-typography-text
        >后选择三种买卖输入类型:</a-typography-paragraph
      >
      <a-typography-paragraph
        ><a-typography-text strong>输入总量：</a-typography-text
        >输入您在交易时间段内需要交易的全部电量，系统会将电量自动分配到每一个小时内进行撮合交易。（注意，您的输入总量必须与购买/卖出数量一致）</a-typography-paragraph
      >

      <a-typography-paragraph
        ><a-typography-text strong>输入每小时所需电量：</a-typography-text
        >输入您在交易时间段内的每一小时内需要交易的电量，系统会据此为您撮合交易。（注意，您的每小时所需电量之和必须与购买/卖出数量一致）</a-typography-paragraph
      >
      <a-typography-paragraph
        ><a-typography-text strong>输入每小时所需电量范围：</a-typography-text
        >输入您在交易时间段内的每一小时内能承受的交易电量上下限，系统会在您输入的电量范围内为您撮合交易。（注意，您的每小时所需电量下限之和必须<a-typography-text
          type="danger"
          >不大于</a-typography-text
        >购买/卖出数量；每小时所需电量上限之和必须<a-typography-text
          type="danger"
          >不小于</a-typography-text
        >购买/卖出数量；对于某一个小时，您的每小时所需电量下限必须<a-typography-text
          type="danger"
          >不大于</a-typography-text
        >每小时所需电量上限）
      </a-typography-paragraph>
      <a-divider />
    </div>

    <a-form :model="releaseDto" :label-col="labelCol" :wrapper-col="wrapperCol">
      <!-- <a-form-item label="选择能源类型">
        <a-select
          v-model:value="releaseDto.energy"
          placeholder="请选择能源类型"
          style="width: 100%"
        >
          <a-select-option value="1">电网</a-select-option>
          <a-select-option value="2">光伏</a-select-option>
          <a-select-option value="3">其他</a-select-option>
        </a-select>
      </a-form-item> -->
      <a-form-item label="购买/卖出数量">
        <a-input-number
          v-model:value="releaseDto.total_elec"
          :min="0"
          placeholder="请填写交易数量"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item label="购买/卖出价格（分）">
        <a-input-number
          v-model:value="releaseDto.price"
          :min="0"
          placeholder="请填写交易价格"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item label="卖出/使用日期">
        <a-date-picker
          v-model:value="releaseDto.date"
          placeholder="请选择一个日期"
          format="YYYY-MM-DD"
          style="width: 100%"
          :disabled-date="disabledDate"
        />
      </a-form-item>
      <a-form-item label="选择交易时间段">
        <a-select
          v-model:value="releaseDto.start_time"
          placeholder="交易开始时间"
          style="width: 45%"
        >          
          <a-select-option v-for="a in 24" :key="a" :value="a - 1"
            >{{ a - 1 }}:00</a-select-option
          >
        </a-select>
        到
        <a-select
          v-model:value="releaseDto.end_time"
          placeholder="交易结束时间"
          style="width: 45%"
        >
          <a-select-option
            v-for="a in 24 - releaseDto.start_time"
            :key="a"
            :value="a + releaseDto.start_time"
            >{{ a + releaseDto.start_time }}:00</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item
        label="买卖输入类型"
        v-if="releaseDto.end_time - releaseDto.start_time > 0"
      >
        <a-radio-group v-model:value="releaseDto.input_type_id">
          <a-radio value="0" @click="turnVisible0">输入总量</a-radio>
          <a-radio value="1" @click="turnVisible1">输入每小时所需电量</a-radio>
          <a-radio value="2" @click="turnVisible2"
            >输入每小时所需电量范围</a-radio
          >
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="每小时所需电量（千瓦时）"
        v-if="state == 1 && releaseDto.end_time - releaseDto.start_time > 0"
      >
        <a-input-number
          v-for="a in releaseDto.end_time - releaseDto.start_time"
          :key="a"
          v-model:value="releaseDto.elec_value[a - 1]"
          :min="0"
          :placeholder="a + releaseDto.start_time - 1 + ':00'"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item
        label="每小时范围上限（千瓦时）"
        v-if="state == 2 && releaseDto.end_time - releaseDto.start_time > 0"
      >
        <a-input-number
          v-for="a in releaseDto.end_time - releaseDto.start_time"
          :key="a"
          v-model:value="releaseDto.elec_upper[a - 1]"
          :min="0"
          :placeholder="a + releaseDto.start_time - 1 + ':00'"
          style="width: 100%"
        />
      </a-form-item>

      <a-form-item
        label="每小时范围下限（千瓦时）"
        v-if="state == 2 && releaseDto.end_time - releaseDto.start_time > 0"
      >
        <a-input-number
          v-for="a in releaseDto.end_time - releaseDto.start_time"
          :key="a"
          v-model:value="releaseDto.elec_lower[a - 1]"
          :min="0"
          :placeholder="a + releaseDto.start_time - 1 + ':00'"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item label="选择你的角色">
        <a-radio-group v-model:value="releaseDto.trade_type">
          <a-radio value="0">买方</a-radio>
          <a-radio value="1">卖方</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="买卖的相关介绍">
        <a-textarea v-model:value="infomation" showCount :maxlength="100" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">发布</a-button>
        <a-button style="margin-left: 100px">回到首页</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import { defineComponent, ref, reactive, toRaw } from "vue";
import { get, post, setLocalToken, tip } from "@/common";
import { message } from "ant-design-vue";
import moment from "moment";

export default defineComponent({
  setup() {
    const success = (info) => {
      message.success(info);
    };
    const error = (info) => {
      message.error(info);
    };
    const releaseDto = reactive({
      input_type_id: "",
      trade_type: "",
      total_elec: "",
      start_time: undefined,
      end_time: undefined,
      price: "",
      date: "",
      elec_value: [],
      elec_upper: [],
      elec_lower: [],
    });
    const state = ref();
    // 分别对应 买卖输入类型 的三个选项
    const turnVisible0 = () => {
      state.value = 0;
      releaseDto.elec_value = [];
      releaseDto.elec_upper = [];
      releaseDto.elec_lower = [];
    };
    const turnVisible1 = () => {
      state.value = 1;
      releaseDto.elec_upper = [];
      releaseDto.elec_lower = [];
    };
    const turnVisible2 = () => {
      state.value = 2;
      releaseDto.elec_value = [];
    };
    const clear = () => {
      releaseDto.input_type_id = "";
      releaseDto.trade_type = "";
      releaseDto.total_elec = "";
      releaseDto.price = "";
      releaseDto.start_time = undefined;
      releaseDto.end_time = undefined;
      releaseDto.date = "";
      releaseDto.elec_value = [];
      releaseDto.elec_upper = [];
      releaseDto.elec_lower = [];
    };

    const onSubmit = () => {
      console.log(releaseDto);
      // 处理空数据情况
      if (
        releaseDto.input_type_id == "" ||
        releaseDto.trade_type == "" ||
        releaseDto.total_elec == "" ||
        releaseDto.price == "" ||
        releaseDto.start_time == undefined ||
        releaseDto.end_time == undefined ||
        releaseDto.date == "" ||
        releaseDto.elec_value == [] ||
        releaseDto.elec_upper == [] ||
        releaseDto.elec_lower == []
      ) {
        error("数据不能为空！");
        return;
      }
      // 处理交易时间段
      // 处理时间槽大于总电量情况
      if (state.value == 1) {
        var temp = 0;
        for (var i = 0; i < releaseDto.elec_value.length; i++) {
          temp += releaseDto.elec_value[i];
        }
        if (temp != releaseDto.total_elec) {
          error("时间槽确定值和不等于总电量，请检查！");
          return;
        }
      }
      if (state.value == 2) {
        var tempLow = 0;
        var tempHigh = 0;
        for (var i = 0; i < releaseDto.elec_lower.length; i++) {
          if (releaseDto.elec_lower[i] > releaseDto.elec_upper[i]) {
            error("时间槽下限应该小于上限！");
            return;
          }
          tempLow += releaseDto.elec_lower[i];
          tempHigh  += releaseDto.elec_upper[i];
        }
        if (tempLow > releaseDto.total_elec) {
          error("时间槽下限和大于总电量，请检查！");
          return;
        }
        if (tempHigh < releaseDto.total_elec) {
          error("时间槽上限和小于总电量，请检查！");
          return;
        }
      }
      // 处理结束时间 开始时间情况
      if (releaseDto.start_time >= releaseDto.end_time) {
        error("开始时间应早于结束时间");
        return;
      }

      post("/trade/release/releaseDeal", releaseDto).then((res) => {
        success("发布成功！");
        clear();
      });
    };

    const infomation = ref("");
    const disabledDate = (current) => {
      return current < moment().startOf("day");
    };
    const range = (start, end) => {
      const result = [];

      for (let i = start; i < end; i++) {
        result.push(i);
      }

      return result;
    };
    // const disabledDateTime = () => {
    //   return {
    //     disabledHours: () => range(0, 24).splice(4, 20),
    //     disabledMinutes: () => range(30, 60),
    //     disabledSeconds: () => [55, 56],
    //   };
    // };
    return {
      clear,
      success,
      disabledDate,
      // disabledDateTime,
      error,
      turnVisible0,
      turnVisible2,
      turnVisible1,
      state,
      infomation,
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 14,
      },
      releaseDto,
      onSubmit,
    };
  },
});
</script>
<style>
.contains {
  padding: 10px;
}
</style>